<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Pid')}:</label>
        
        <div class="col-xs-12 col-sm-8">
            <select name ="row[pid]" id='pid' style='border: 1px solid #d2d6de;width: 100%;height: 32px;font-size: 13px;'>
                 {volist name="integral" id="vo"}
                <option value="{$vo.id}">{$vo.name}</option>
                 {/volist}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" class="form-control" name="row[title]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" class="form-control" size="50" name="row[image]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-image"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Integral')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-integral" class="form-control" name="row[integral]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Money')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-money" class="form-control" name="row[money]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Original_price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-original_price" class="form-control" step="0.01" name="row[original_price]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Raw_integral')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-raw_integral" class="form-control" name="row[raw_integral]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Sort')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-sort" class="form-control" name="row[sort]" type="number" value="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            
            <div class="radio">
            {foreach name="statusList" item="vo"}
            <label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="1"}checked{/in} /> {$vo}</label> 
            {/foreach}
            </div>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Addtime')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-addtime" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[addtime]" type="text" value="{:date('Y-m-d H:i:s')}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Endtime')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-endtime" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[endtime]" type="text" value="{:date('Y-m-d H:i:s')}">
        </div>
    </div>
    <button onclick="standard()"  type="button">测试</button>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">商品规格:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="control-group">
                <label class="control-label"> </label>
                <div class="controls">
                    <button id="add_lv1" class="btn btn-primary" type="button">添加规格</button>
                    <button id="update_table" class="btn btn-success" type="button">确认规格</button>
                </div>
            </div>
            <div id="lv_table_con" class="control-group" style="display: none;">
                <label class="control-label">规格表</label>
                <div class="controls">
                    <div id="lv_table">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
     <div class="form-group">
        <label for="c-editor" class="control-label col-xs-12 col-sm-2">内容:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea name="row[editor]" id="c-editor" cols="60" rows="5" class="form-control editor"></textarea>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit"  class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>

            
        </div>
    </div>
</form>

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    var lv1HTML = '<div class="control-group lv1">' +
                    '<label class="control-label">规格名称</label>' +
                    '<div class="controls">' +
                        '<input type="text" class="goods-comment-id" name="size_name" placeholder="规格名称">' +
                        '<button class="btn btn-primary add_lv2" type="button">添加</button>' +
                        '<button class="btn btn-danger remove_lv1" type="button">删除</button>' +
                    '</div>' +
                    '<div class="controls lv2s"></div>' +
                '</div>';
    
    var lv2HTML = '<div style="margin-top: 5px;">' +
                    '<input type="text" class="goods-comment-id" name="spec_name" placeholder="规格分类">' +
                    '<button class="btn btn-danger remove_lv2" type="button">删除</button>' +
                '</div>';
    $(document).ready(function() {
        $('#add_lv1').on('click', function() {
            var last = $('.control-group.lv1:last');
            if (!last || last.length == 0) {
                $(this).parents('.control-group').eq(0).after(lv1HTML);
            } else {
                last.after(lv1HTML);
            }
        });

        $(document).on('click', '.remove_lv1', function() {
            $(this).parents('.lv1').remove();
        });

        $(document).on('click', '.add_lv2', function() {
            $(this).parents('.lv1').find('.lv2s').append(lv2HTML);
        });

        $(document).on('click', '.remove_lv2', function() {
            $(this).parent().remove();
        });

        $('#update_table').on('click', function() {
            var lv1Arr = $('input[name="size_name"]');
            if (!lv1Arr || lv1Arr.length == 0) {
                $('#lv_table_con').hide();
                $('#lv_table').html('');
                return;
            }
            for (var i = 0; i < lv1Arr.length; i++) {
                var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="spec_name"]');
                if (!lv2Arr || lv2Arr.length == 0) {
                    alert('请先删除无参数的规格项！');
                    return;
                }
            }

            var tableHTML = '';
            tableHTML += '<table class="table table-bordered">';
            tableHTML += '    <thead>';
            tableHTML += '        <tr>';
            for (var i = 0; i < lv1Arr.length; i++) {
                tableHTML += '<th width="50">' + $(lv1Arr[i]).val() + '</th>';
            }
            tableHTML += '            <th width="20">现价</th>';
            tableHTML += '            <th width="20">原价</th>';
            tableHTML += '            <th width="20">库存</th>';
            tableHTML += '            <th width="20">图片</th>';
            tableHTML += '            <th width="20">上下架</th>';
            tableHTML += '        </tr>';
            tableHTML += '    </thead>';
            tableHTML += '    <tbody>';
             
            var numsArr = new Array();
            var idxArr = new Array();
            for (var i = 0; i < lv1Arr.length; i++) {
                numsArr.push($(lv1Arr[i]).parents('.lv1').find('input[name="spec_name"]').length);
                idxArr[i] = 0;
            }
             
            var len = 1;
            var rowsArr = new Array();
            for (var i = 0; i < numsArr.length; i++) {
                len = len * numsArr[i];
                 
                var tmpnum = 1;
                for (var j = numsArr.length - 1; j > i; j--) {
                    tmpnum = tmpnum * numsArr[j];
                }
                rowsArr.push(tmpnum);
            }
             
            for (var i = 0; i < len; i++) {
                tableHTML += '        <tr data-row="' + (i+1) + '">';
                 
                var name = '';
                for (var j = 0; j < lv1Arr.length; j++) {
                    var n = parseInt(i / rowsArr[j]);
                    if (j == 0) {
                    } else if (j == lv1Arr.length - 1) {
                        n = idxArr[j];
                        if (idxArr[j] + 1 >= numsArr[j]) {
                            idxArr[j] = 0;
                        } else {
                            idxArr[j]++;
                        }
                    } else {
                        var m = parseInt(i / rowsArr[j]);
                        n = m % numsArr[j];
                    }
                     
                    var text = $(lv1Arr[j]).parents('.lv1').find('input[name="spec_name"]').eq(n).val();
                    if (j != lv1Arr.length - 1) {
                        name += text + '_';
                    } else {
                        name += text;
                    }
                     
                    if (i % rowsArr[j] == 0) {
                        tableHTML += '<td width="50" rowspan="' + rowsArr[j] + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>';
                    }
                }
                 
                tableHTML += '<td width="20"><input type="text" class="goods-comment-id" name="' + name + '[price]" /></td>';
                tableHTML += '<td width="20"><input type="text" name="' + name + '[original_price]" /></td>';
                tableHTML += '<td width="20"><input type="text" name="' + name + '[original_price]" /></td>';
                tableHTML += '<td width="20"><input type="file" name="' + name + '[original_price]" /></td>';
                tableHTML += '<td width="20"><input type="submit" name="' + name + '[original_price]" value="上架" /></td>';
                tableHTML += '</tr>';

            }
            tableHTML += '</tbody>';
            tableHTML += '</table>';
            $('#lv_table_con').show();
            $('#lv_table').html(tableHTML);
        });
    });

    function standard(){
        var arr1 = [];
        [...document.querySelectorAll("tr")].map((item, index) => {
            arr1.push([...item.childNodes].map(i => i.innerHTML).filter(un => un));
        })
        // var dataList = document.querySelectorAll("tr");
        // for (var i = 0; i <= dataList.length; i++) {
             

        // }
     console.log(arr1);
        
    }
</script>
